{% extends "blog/base.html" %}

{% block css %}
    <link rel="stylesheet" href="/static/css/flexslider.css"/>
{% endblock %}

{% block content %}

    <section class="mysection">
        <div class="swiper-container">
            <ul class="slides swiper-wrapper">

                <li class="swiper-slide">
                    <a href="#" title="活着，想那么多干嘛!">
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492080772539&di=fc95f383c53577c2e3a7953c6768a3e6&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201702%2F23%2F102051df9vecu9wk4phvu1.jpg"
                             alt="活着，想那么多干嘛!"/>
                    </a>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <span class="silde-title">活着，想那么多干嘛!</span>
                </li>

                <li class="swiper-slide">
                    <a href="#" title="life is short, use python">
                        <img src="http://img.qiniu.spiderpy.cn/blog/blog/banner/20201022110631.png"
                             alt="life is short, use python"/>
                    </a>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <span class="silde-title">life is short, use python</span>
                </li>
            </ul>

            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>


        <div class="arclist">
            <h4 class="index-title homeh4"><a href=""><i class="el-certificate"></i>最新文章
                <small>News</small>
            </a></h4>
            {% include "blog/component/blog_list.html" with blogs=blog_list id="New" %}
        </div>

        <div class="arclist">
            <h4 class="index-title homeh4"><a href=""><i class="el-certificate"></i>热门文章
                <small>Hot</small>
            </a></h4>
            {% include "blog/component/blog_list.html" with blogs=blog_hot id="Hot" %}
        </div>
    </section>

{% endblock %}

{% block js %}
    <script src="/static/js/album.js"></script>
    <script src="/static/js/jquery.flexslider-min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 轮播图
            new Swiper('.swiper-container', {
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                pagination: '.swiper-pagination',
                paginationType: 'fraction',
                centeredSlides: true,
                autoplay: 4000,//自动播放时间
                autoHeight: true //自动高度

            });
            //瀑布流
            $('.su').jaliswall({item: '.su-li'});

        });
    </script>
{% endblock %}